<template>
 <view>
   <!-- 右侧弹出栏 -->
   <view class="u-demo-area">
     <u-popup border-radius="10" v-model="hasPopup" mode="top"  mask :closeable="false"
       close-icon-pos="top-left">
<!--       <view style="margin-top: 32rpx;">-->
<!--         <text class="bss-price-title-text">服务单查询</text>-->
<!--       </view>-->
       <view style="margin-top: 10px;">
         <view v-if='!isDetail'>
           <view class="pop-item">
             <text class="pop-item-text">站址编码</text>
             <u-input v-model="popupForm.siteId" type="text" border-color="#c0c4cc" />
           </view>
           <view class="pop-item">
             <text class="pop-item-text">项目编码</text>
             <u-input v-model="popupForm.subPrjCode" type="text" border-color="#c0c4cc" />
           </view> <view class="pop-item">
           <text class="pop-item-text">项目名称</text>
           <u-input v-model="popupForm.subPrjName" type="text" border-color="#c0c4cc" />
         </view>
         </view>
           <view class="pop-item">
             <text class="pop-item-text">服务名称</text>
             <u-input v-model="popupForm.serviceName" type="text" border-color="#c0c4cc" />
           </view>
           <view class="pop-item">
             <text class="pop-item-text">服务编码</text>
             <u-input v-model="popupForm.serviceCode" type="text" border-color="#c0c4cc" />
           </view>
       
           
       </view>
<!--       <view style="height: 200rpx;">-->
<!--         <view class="close-btn">-->
<!--           <u-button @click="resetPopupForm" size="medium">重置</u-button>-->
<!--           <u-button size="medium" @click="searchList">确定</u-button>-->
<!--         </view>-->
<!--       </view>-->
       <view class="pop-btn">
         <view @click.stop="resetPopupForm" class="pop-btn-cancel">重置</view>
         <view v-debounce="searchList" class="pop-btn-confirm">确定</view>
       </view>
     </u-popup>
   </view>
 </view>
</template>
<script>
export default {
  name: "popupForm",
  props:['value','isDetail'],
  data(){
    return {
      popupForm:{
        serviceName: '',
        serviceCode: '',
        subPrjCode: "",
        subPrjName: "",
        siteId: "",
      }
    }
  },
  computed:{
    hasPopup:{
      get(){
        return this.value
      },
      set(e){
        this.$emit('input',e)
      }
    }
  },
  methods:{
    searchList() {
      this.hasPopup = false;
      this.baseLister = [];
      this.$emit('submit',this.popupForm)
    },
    resetPopupForm(){
      this.popupForm.serviceName = ""
      this.popupForm.serviceCode = ""
    },
  }
}
</script>
<style scoped lang='scss'>
.u-demo-area{
  text-align: center;
}
.pop-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 30rpx;
  border-bottom: 2rpx solid #c0c4cc;
  
  .pop-item-text {
    font-size: 28rpx;
    color: #606266;
    width: 30%;
  }
}
.pop-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  
  .pop-btn-cancel {
    width: 25%;
    margin-right: 30rpx;
    height: 52rpx;
    font-size: 28rpx;
    color: rgb(235, 75, 75);
    border: 1px solid rgb(235, 75, 75);
    border-radius: 10rpx;
    text-align: center;
  }
  
  .pop-btn-confirm {
    width: 75%;
    height: 52rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
    background-color: rgb(235, 75, 75);
    color: #FFFFFF;
    text-align: center;
  }
}
</style>